Open Graph Protocol

#HTML

#Facebook

野中龍一

2011.10.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Open Graph Protocolとは

Open Graph Protocol（以降OGP）は、簡単に言うとあるWebページを機械が理解しやすいように付加する情報のことです。Facebookの「いいね！」やmixiの「ミクシィチェック」などに利用されています。
具体的にどのように利用されるかというと「いいね！」や「ミクシィチェック」されたWebページが増えてくると、それらの情報をどのように扱うかが難しくなってきます。そこで利用され始めたのがこのOGPです。

OGPを使うには？

OGPはとても簡単に利用できます。
まずはこのソースを見てください。

<!DOCTYPE html> 
<html xmlns:og="http://ogp.me/ns#"> 
<head>  
<title>タイトル</title> 
<meta property="og:title" content="OGPタイトル"> 
<meta property="og:type" content="article"> 
<meta property="og:image" content="http://nonakaryuichi.me/img.gif"> 
<meta property="og:url" content="http://nonakaryuichi.me"> 
<meta property="og:description" content="きままなクリエイターの備忘録です。"> 
<meta property="og:site_name" content="nonakaryuichi.me">
</head>
<body>
	
</body>
</html>

このようにXMLネームスペースを記述し、メタタグを使いOGPを記述します。

実際にこのブログではOGPを設定しています。たとえば、いいね！を押した際にどのように表示されるかというとこんな感じです。